<html><head><title>CSS.js</title><link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/></head><body><h1>CSS.js</h1><pre class="highlighted"><code><i>/**
 * @class Ext.util.CSS
 * Utility class <b>for</b> manipulating CSS rules
 * @singleton
 */</i>
Ext.util.CSS = <b>function</b>(){
	<b>var</b> rules = null;
   	<b>var</b> doc = document;

    <b>var</b> camelRe = /(-[a-z])/gi;
    <b>var</b> camelFn = <b>function</b>(m, a){ <b>return</b> a.charAt(1).toUpperCase(); };

   <b>return</b> {
   <i>/**
    * Very simple dynamic creation of stylesheets from a text blob of rules.  The text will wrapped <b>in</b> a style
    * tag and appended to the HEAD of the document.
    * @param {String} cssText The text containing the css rules
    * @param {String} id An id to add to the stylesheet <b>for</b> later removal
    * @<b>return</b> {StyleSheet}
    */</i>
   createStyleSheet : <b>function</b>(cssText, id){
       <b>var</b> ss;
       <b>var</b> head = doc.getElementsByTagName(&quot;head&quot;)[0];
       <b>var</b> rules = doc.createElement(&quot;style&quot;);
       rules.setAttribute(&quot;type&quot;, &quot;text/css&quot;);
       <b>if</b>(id){
           rules.setAttribute(&quot;id&quot;, id);
       }
       <b>if</b>(Ext.isIE){
           head.appendChild(rules);
           ss = rules.styleSheet;
           ss.cssText = cssText;
       }<b>else</b>{
           try{
                rules.appendChild(doc.createTextNode(cssText));
           }catch(e){
               rules.cssText = cssText; 
           }
           head.appendChild(rules);
           ss = rules.styleSheet ? rules.styleSheet : (rules.sheet || doc.styleSheets[doc.styleSheets.length-1]);
       }
       <b>this</b>.cacheStyleSheet(ss);
       <b>return</b> ss;
   },

   <i>/**
    * Removes a style or link tag by id
    * @param {String} id The id of the tag
    */</i>
   removeStyleSheet : <b>function</b>(id){
       <b>var</b> existing = doc.getElementById(id);
       <b>if</b>(existing){
           existing.parentNode.removeChild(existing);
       }
   },

   <i>/**
    * Dynamically swaps an existing stylesheet reference <b>for</b> a <b>new</b> one
    * @param {String} id The id of an existing link tag to remove
    * @param {String} url The href of the <b>new</b> stylesheet to include
    */</i>
   swapStyleSheet : <b>function</b>(id, url){
       <b>this</b>.removeStyleSheet(id);
       <b>var</b> ss = doc.createElement(&quot;link&quot;);
       ss.setAttribute(&quot;rel&quot;, &quot;stylesheet&quot;);
       ss.setAttribute(&quot;type&quot;, &quot;text/css&quot;);
       ss.setAttribute(&quot;id&quot;, id);
       ss.setAttribute(&quot;href&quot;, url);
       doc.getElementsByTagName(&quot;head&quot;)[0].appendChild(ss);
   },
   
   <i>/**
    * Refresh the rule cache <b>if</b> you have dynamically added stylesheets
    * @<b>return</b> {Object} An object (hash) of rules indexed by selector
    */</i>
   refreshCache : <b>function</b>(){
       <b>return</b> this.getRules(true);
   },

   <i>// private</i>
   cacheStyleSheet : <b>function</b>(ss){
       <b>if</b>(!rules){
           rules = {};
       }
       try{<i>// try catch <b>for</b> cross domain access issue</i>
           <b>var</b> ssRules = ss.cssRules || ss.rules;
           <b>for</b>(var j = ssRules.length-1; j &gt;= 0; --j){
               rules[ssRules[j].selectorText] = ssRules[j];
           }
       }catch(e){}
   },
   
   <i>/**
    * Gets all css rules <b>for</b> the document
    * @param {Boolean} refreshCache true to refresh the internal cache
    * @<b>return</b> {Object} An object (hash) of rules indexed by selector
    */</i>
   getRules : <b>function</b>(refreshCache){
   		<b>if</b>(rules == null || refreshCache){
   			rules = {};
   			<b>var</b> ds = doc.styleSheets;
   			<b>for</b>(var i =0, len = ds.length; i &lt; len; i++){
   			    try{
    		        <b>this</b>.cacheStyleSheet(ds[i]);
    		    }catch(e){} 
	        }
   		}
   		<b>return</b> rules;
   	},
   	
   	<i>/**
    * Gets an an individual CSS rule by selector(s)
    * @param {String/Array} selector The CSS selector or an array of selectors to try. The first selector that is found is returned.
    * @param {Boolean} refreshCache true to refresh the internal cache <b>if</b> you have recently updated any rules or added styles dynamically
    * @<b>return</b> {CSSRule} The CSS rule or null <b>if</b> one is not found
    */</i>
   getRule : <b>function</b>(selector, refreshCache){
   		<b>var</b> rs = <b>this</b>.getRules(refreshCache);
   		<b>if</b>(!(selector instanceof Array)){
   		    <b>return</b> rs[selector];
   		}
   		<b>for</b>(var i = 0; i &lt; selector.length; i++){
			<b>if</b>(rs[selector[i]]){
				<b>return</b> rs[selector[i]];
			}
		}
		<b>return</b> null;
   	},
   	
   	
   	<i>/**
    * Updates a rule property
    * @param {String/Array} selector If it's an array it tries each selector until it finds one. Stops immediately once one is found.
    * @param {String} property The css property
    * @param {String} value The <b>new</b> value <b>for</b> the property
    * @<b>return</b> {Boolean} true If a rule was found and updated
    */</i>
   updateRule : <b>function</b>(selector, property, value){
   		<b>if</b>(!(selector instanceof Array)){
   			<b>var</b> rule = <b>this</b>.getRule(selector);
   			<b>if</b>(rule){
   				rule.style[property.replace(camelRe, camelFn)] = value;
   				<b>return</b> true;
   			}
   		}<b>else</b>{
   			<b>for</b>(var i = 0; i &lt; selector.length; i++){
   				<b>if</b>(this.updateRule(selector[i], property, value)){
   					<b>return</b> true;
   				}
   			}
   		}
   		<b>return</b> false;
   	}
   };	
}();</code></pre><hr><div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>
    </body></html>